<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item" type="success" @click="handleSubmit"> 保存 </el-button>
    </div>
    <div class="body">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>基本信息</span>
        </div>
        <el-form :model="device">
          <el-form-item label="名称" :label-width="formLabelWidth">
            <el-input v-model="device.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="位置" :label-width="formLabelWidth">
            <el-input v-model="device.position" autocomplete="off" />
          </el-form-item>
          <el-form-item label="SN" :label-width="formLabelWidth">
            <el-input v-model="device.sn" autocomplete="off" />
          </el-form-item>
          <el-form-item label="订阅" :label-width="formLabelWidth">
            <el-input v-model="device.sub" autocomplete="off" />
          </el-form-item>
          <el-form-item label="推送" :label-width="formLabelWidth">
            <el-input v-model="device.pub" autocomplete="off" />
          </el-form-item>
          <el-form-item label="型号" :label-width="formLabelWidth">
            <el-input v-model="device.model" autocomplete="off" />
          </el-form-item>
          <el-form-item label="类型" :label-width="formLabelWidth">
            <el-input v-model="device.tag" autocomplete="off" disabled />
          </el-form-item>
        </el-form>
      </el-card>

      <!-- <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>状态-数据</span>
        </div>
        <el-form :model="device">
          <el-form-item label="温度" :label-width="formLabelWidth">
            <el-input v-model="device.value.temperature" autocomplete="off" />
          </el-form-item>
          <el-form-item label="湿度" :label-width="formLabelWidth">
            <el-input v-model="device.value.humidity" autocomplete="off" />
          </el-form-item>
          <el-form-item label="压力" :label-width="formLabelWidth">
            <el-input v-model="device.value.press" autocomplete="off" />
          </el-form-item>
          <el-form-item label="出源许可" :label-width="formLabelWidth">
            <el-input v-model="device.value.chain" autocomplete="off" />
          </el-form-item>
          <el-form-item label="修正因子ktp" :label-width="formLabelWidth">
            <el-input v-model="device.value.ktp" autocomplete="off" />
          </el-form-item>
        </el-form>
      </el-card> -->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>IO 引脚</span>
        </div>
        <el-form :model="device">
          <el-form-item label="按键0" :label-width="formLabelWidth">
            <div class="row">
              <el-input v-model="device.value.key0.value" autocomplete="off" />
              <span class="name">名称：</span>
              <el-input v-model="device.value.key0.name" autocomplete="off" />
              <span class="name">启用：</span>
              <el-select v-model="device.value.key0.enable" placeholder="请设置是否启用" style="width:500px;">
                <el-option v-for="item in enableOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="按键1" :label-width="formLabelWidth">
            <div class="row">
              <el-input v-model="device.value.key1.value" autocomplete="off" />
              <span class="name">名称：</span>
              <el-input v-model="device.value.key1.name" autocomplete="off" />
              <span class="name">启用：</span>
              <el-select v-model="device.value.key1.enable" placeholder="请设置是否启用" style="width:500px;">
                <el-option v-for="item in enableOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="按键2" :label-width="formLabelWidth">
            <div class="row">
              <el-input v-model="device.value.key2.value" autocomplete="off" />
              <span class="name">名称：</span>
              <el-input v-model="device.value.key2.name" autocomplete="off" />
              <span class="name">启用：</span>
              <el-select v-model="device.value.key2.enable" placeholder="请设置是否启用" style="width:500px;">
                <el-option v-for="item in enableOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="按键3" :label-width="formLabelWidth">
            <div class="row">
              <el-input v-model="device.value.key3.value" autocomplete="off" />
              <span class="name">名称：</span>
              <el-input v-model="device.value.key3.name" autocomplete="off" />
              <span class="name">启用：</span>
              <el-select v-model="device.value.key3.enable" placeholder="请设置是否启用" style="width:500px;">
                <el-option v-for="item in enableOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="红外" :label-width="formLabelWidth">
            <div class="row">
              <el-input v-model="device.value.infrared.value" autocomplete="off" />
              <span class="name">名称：</span>
              <el-input v-model="device.value.infrared.name" autocomplete="off" />
              <span class="name">启用：</span>
              <el-select v-model="device.value.infrared.enable" placeholder="请设置是否启用" style="width:500px;">
                <el-option v-for="item in enableOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="门禁" :label-width="formLabelWidth">
            <div class="row">
              <el-input v-model="device.value.door.value" autocomplete="off" />
              <span class="name">名称：</span>
              <el-input v-model="device.value.door.name" autocomplete="off" />
              <span class="name">启用：</span>
              <el-select v-model="device.value.door.enable" placeholder="请设置是否启用" style="width:500px;">
                <el-option v-for="item in enableOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="继电器0" :label-width="formLabelWidth">
            <div class="row">
              <el-input v-model="device.value.relay0.value" autocomplete="off" />
              <span class="name">名称：</span>
              <el-input v-model="device.value.relay0.name" autocomplete="off" />
              <span class="name">启用：</span>
              <el-select v-model="device.value.relay0.enable" placeholder="请设置是否启用" style="width:500px;">
                <el-option v-for="item in enableOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="继电器1" :label-width="formLabelWidth">
            <div class="row">
              <el-input v-model="device.value.relay1.value" autocomplete="off" />
              <span class="name">名称：</span>
              <el-input v-model="device.value.relay1.name" autocomplete="off" />
              <span class="name">启用：</span>
              <el-select v-model="device.value.relay1.enable" placeholder="请设置是否启用" style="width:500px;">
                <el-option v-for="item in enableOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div class="grid-3">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>修正因子</span>
          <div style="float: right;">
            <el-button type="success" @click="handleSetFactor">设置</el-button>
            <el-button type="primary" @click="handleGetFactor">读取</el-button>
          </div>
        </div>
        <el-form :model="device">
          <el-form-item label="温度修正因子" :label-width="formLabelWidth">
            <el-input-number v-model="device.value.temperature_factor" :precision="1" :step="0.1" :max="1000" :min="-1000" />
          </el-form-item>
          <el-form-item label="湿度修正因子" :label-width="formLabelWidth">
            <el-input-number v-model="device.value.humidity_factor" :precision="1" :step="0.1" :max="1000" :min="-1000" />
          </el-form-item>
          <el-form-item label="压力修正因子" :label-width="formLabelWidth">
            <el-input-number v-model="device.value.press_factor" :precision="3" :step="0.1" :max="1000" :min="-1000" />
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>MQTT设置(仅用于出厂设置)</span>
          <div style="float: right;">
            <el-button type="success" @click="handleSetMqtt">设置</el-button>
            <el-button type="primary" @click="handleGetMqtt">读取</el-button>
          </div>
        </div>
        <el-form :model="device">
          <el-form-item label="uri" :label-width="formLabelWidth">
            <el-input v-model="device.value.mqtt.uri" autocomplete="off" />
          </el-form-item>
          <el-form-item label="clientid" :label-width="formLabelWidth">
            <el-input v-model="device.value.mqtt.clientid" autocomplete="off" />
          </el-form-item>
          <el-form-item label="username" :label-width="formLabelWidth">
            <el-input v-model="device.value.mqtt.username" autocomplete="off" />
          </el-form-item>
          <el-form-item label="password" :label-width="formLabelWidth">
            <el-input v-model="device.value.mqtt.password" autocomplete="off" />
          </el-form-item>
          <el-form-item label="subtopic" :label-width="formLabelWidth">
            <el-input v-model="device.value.mqtt.subtopic" autocomplete="off" />
          </el-form-item>
          <el-form-item label="pubtopic" :label-width="formLabelWidth">
            <el-input v-model="device.value.mqtt.pubtopic" autocomplete="off" />
          </el-form-item>
          <el-form-item label="willmsg" :label-width="formLabelWidth">
            <el-input v-model="device.value.mqtt.willmsg" autocomplete="off" />
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>网络设置(仅用于出厂设置)</span>
          <div style="float: right;">
            <el-button type="success" @click="handleSetNet">设置</el-button>
            <el-button type="primary" @click="handleGetNet">读取</el-button>
          </div>
        </div>
        <el-form :model="device">
          <el-form-item label="wifi_type" :label-width="formLabelWidth">
            <el-input v-model="device.value.net.type" autocomplete="off" />
          </el-form-item>
          <el-form-item label="wifi_ssid" :label-width="formLabelWidth">
            <el-input v-model="device.value.net.wifi_ssid" autocomplete="off" />
          </el-form-item>
          <el-form-item label="wifi_pwd" :label-width="formLabelWidth">
            <el-input v-model="device.value.net.wifi_pwd" autocomplete="off" />
          </el-form-item>
          <el-form-item label="eth_mac" :label-width="formLabelWidth">
            <el-input v-model="device.value.net.eth_mac" autocomplete="off" />
          </el-form-item>
        </el-form>
      </el-card>
    </div>

  </div>
</template>

<script>
import { editDevice } from '@/api/device'
import { CMD_CONTROL } from '@/utils/cmd'

const defaultDeviceConfig = {
  name: '安全连锁检测控制设备',
  sn: 'ctl00001',
  model: 'FSC_CTL',
  tag: 'control',
  position: '位置',
  sub: 'fsc/control/ctl00001/rx',
  pub: 'fsc/control/ctl00001/tx',
  value: {
    // IO口状态
    key0: { value: 0, name: '按键0', enable: 1 },
    key1: { value: 0, name: '按键1', enable: 1 },
    key2: { value: 0, name: '按键2', enable: 1 },
    key3: { value: 0, name: '按键3', enable: 1 },
    infrared: { value: 0, name: '红外', enable: 1 },
    door: { value: 0, name: '门禁', enable: 1 },
    relay0: { value: 0, name: '继电器0', enable: 1 },
    relay1: { value: 0, name: '继电器1', enable: 1 },

    mqtt: {
      uri: 'tcp://192.168.1.150:1883',
      clientid: 'ctl00001',
      username: 'admin',
      password: 'public',
      subtopic: 'fsc/control/ctl00001/rx',
      pubtopic: 'fsc/control/ctl00001/tx',
      willmsg: 'goodbye'
    },

    net: {
      type: '2',
      wifi_ssid: 'TP-LINK_FSC',
      wifi_pwd: '1a2b3c4d5e6f7',
      eth_mac: '11:22:33:44:55:66'
    },

    // 温湿度压力
    temperature: 0,
    humidity: 0,
    press: 0,

    // 温湿度压力修正因子
    temperature_factor: 0,
    humidity_factor: 0,
    press_factor: 0,

    // 连锁
    chain: 0,
    // 温度气压修正
    ktp: 1,
    // 是否自动获取温湿度压力计算ktp
    auto: true
  },
  online: 0,
  status: 0,
  lock: 0,
  order: 4
}

export default {
  name: 'RG601',
  components: { },
  data() {
    return {
      device: defaultDeviceConfig,
      formLabelWidth: '200px',
      enableOptions: [{ label: '启用', value: 1 }, { label: '禁用', value: 0 }],
      pin: []
    }
  },
  created() {
    console.log('设备信息')
    this.device = this.$route.query
    this.subscribe(this.device.pub)
  },
  methods: {
    // 提交保存
    handleSubmit() {
      editDevice(this.device).then(response => {
        if (response.code === 200) {
          this.$message({
            type: 'success',
            message: response.message
          })
          this.$router.push({ path: '/device/index' })
        } else this.$message(response.message)
      })
    },

    // 默认配置
    defaultConfig(item) {
    },

    // 保存到下位机
    handleSetFactor() {
      this.publish(this.device.sub, JSON.stringify({
        code: CMD_CONTROL.set_factor.toString(),
        msg: {
          temperature_factor: this.device.value.temperature_factor.toString(),
          humidity_factor: this.device.value.humidity_factor.toString(),
          press_factor: this.device.value.press_factor.toString()
        }
      }))
    },
    handleGetFactor() {
      this.device.value.temperature_factor = 0
      this.device.value.humidity_factor = 0
      this.device.value.press_factor = 0
      this.publish(this.device.sub, JSON.stringify({
        code: CMD_CONTROL.get_factor.toString(),
        msg: '1'
      }))
    },

    // 保存到下位机
    handleSetMqtt() {
      this.publish(this.device.sub, JSON.stringify({
        code: CMD_CONTROL.set_mqtt.toString(),
        msg: {
          uri: this.device.value.mqtt.uri.toString(),
          clientid: this.device.value.mqtt.clientid.toString(),
          username: this.device.value.mqtt.username.toString(),
          password: this.device.value.mqtt.password.toString(),
          subtopic: this.device.value.mqtt.subtopic.toString(),
          pubtopic: this.device.value.mqtt.pubtopic.toString(),
          willmsg: this.device.value.mqtt.willmsg.toString()
        }
      }))
    },
    handleGetMqtt() {
      this.device.value.mqtt = {
        uri: '',
        clientid: '',
        username: '',
        password: '',
        subtopic: '',
        pubtopic: '',
        willmsg: ''
      }
      this.publish(this.device.sub, JSON.stringify({
        code: CMD_CONTROL.get_mqtt.toString(),
        msg: '1'
      }))
    },

    // 保存到下位机
    handleSetNet() {
      this.publish(this.device.sub, JSON.stringify({
        code: CMD_CONTROL.set_net.toString(),
        msg: {
          type: this.device.value.net.type.toString(),
          wifi_ssid: this.device.value.net.wifi_ssid.toString(),
          wifi_pwd: this.device.value.net.wifi_pwd.toString(),
          eth_mac: this.device.value.net.eth_mac.toString()
        }
      }))
    },
    handleGetNet() {
      this.device.value.net = {
        type: '',
        wifi_ssid: '',
        wifi_pwd: '',
        eth_mac: ''
      }
      this.publish(this.device.sub, JSON.stringify({
        code: CMD_CONTROL.get_net.toString(),
        msg: '1'
      }))
    },

    subscribe(val) {
      console.log('mqtt订阅消息')
      console.log('topic:' + val)
      this.$mqtt.subscribe(val)
    },
    publish(topic, message) {
      console.log('推送消息')
      console.log('topic:' + topic)
      console.log('message:' + message)
      this.$mqtt.publish(topic, message)
    },

    codeDeal(code, msg) {
      if (parseInt(code) === CMD_CONTROL.set_net) {
        this.$message({ type: 'success', message: '设置net成功' })
      }
      if (parseInt(code) === CMD_CONTROL.get_net) {
        this.$message({ type: 'success', message: '读取net成功' })
        this.device.value.net = msg
      }
      if (parseInt(code) === CMD_CONTROL.set_mqtt) {
        this.$message({ type: 'success', message: '设置mqtt成功' })
      }
      if (parseInt(code) === CMD_CONTROL.get_mqtt) {
        this.$message({ type: 'success', message: '读取mqtt成功' })
        this.device.value.mqtt = msg
      }
      if (parseInt(code) === CMD_CONTROL.set_factor) {
        this.$message({ type: 'success', message: '设置刻度因子成功' })
      }
      if (parseInt(code) === CMD_CONTROL.get_factor) {
        this.device.value.temperature_factor = msg.temperature_factor
        this.device.value.humidity_factor = msg.humidity_factor
        this.device.value.press_factor = msg.press_factor
        this.$message({ type: 'success', message: '读取刻度因子成功' })
      }
    }
  },
  mqtt: {
    '#'(data, topic) {
      try {
        console.log('收到消息')
        console.log('topic:' + topic)
        console.log('payload: ' + String.fromCharCode.apply(null, data))
        if (topic === this.device.pub) {
          var payload = JSON.parse(data)
          console.log(payload)
          console.log('主题正确')
          this.codeDeal(parseInt(payload.aswcode), payload.aswmsg)
        }
      } catch (error) {
        console.log('异常信息: ' + error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card{
  margin: 10px;
}

.body{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.row {
  width: 100%;
  display:flex;
  display:-webkit-flex;/*Safari*/
  justify-content:space-around;/*水平排布方式*/
  align-items:center;/*垂直对齐方式*/
}

.name {
  text-align: center;
  width: 300px;
  font-size: 15px;
}

</style>
